<template>
  <div id="home">

    <h1>{{ msg }}</h1>
    <h2>home组件</h2>

    <v-head ref="head"></v-head>


    <hr />
    <button @click="getChild()">获取子组件的数据和方法</button>

  </div>
</template>



<script>
  /**
     * 父组件向子组件传值
     * 1. 父组件调用子组件的时候，动态绑定属性值
     * 
     * 2. 在子组件里面通过props接受父组件传递过来的值 
     * 
     * props: {
        "title": String,
        "message": String,
        "run": Function,
        "home": Object
      }
      3.直接在子组件里面使用
  
  -----------------------------------------------------------------------
      父组件直接使用子组件的数据和方法
      1.调用子组件的时候定义一个ref
      <v-head ref="head"></v-head>
  
      2.在父组件里面通过（类似于dom操作）
      this.$ref.head.属性
  
      this.$ref.head.方法
  
  
  ----------------------------------------------------------------------
      子组件直接使用父组件的数据和方法
      
      this.$parent.属性
  
      this.$parent.方法
  
  
     * 
     */
  import Head from "./head.vue";
  export default {
    data() {
      return {
        msg: "home组件"
      };
    },
    methods: {
      getChild() {
        alert(this.$refs.head.msg);
        this.$refs.head.run("123213123");
      },
      run(data) {
        alert("父组件的run方法：" + data);
      }
    },
    components: {
      "v-head": Head
    },
    mounted() {
      console.log("组件渲染完毕");
    }
  };
</script>

<style lang="scss">
</style>